(function () {
  const id = location.search.substring(4);
  // 获取菜单详情
  axios({
    method: 'GET',
    url: 'http://124.223.14.236:3001/api/recipe/' + id,
  }).then(function (result) {
    const menuDetail = result.data.data;
    console.log(menuDetail);
    const img = 'http://124.223.14.236:3001/public/' + menuDetail.img;
    document.querySelector('.container .left img').src = img;
    document.querySelector('.container .right h3').innerHTML = menuDetail.name;
    document.querySelector('.container .right p').innerHTML = menuDetail.description;
  });

  //渲染美食列表
  axios({
    method: 'GET',
    url: 'http://124.223.14.236:3001/api/recipeInfo/',
    params: {
      recipe_id: id,
    },
  }).then(function (result) {
    const list = result.data.data;
    if (list.length) {
      let listStr = list
        .map((item, index) => {
          const { img, title, id } = item;
          return `
        <li>
          <a href="food_detail.html?id=${id}">
            <img src=${'http://124.223.14.236:3001/public/' + img} alt="" />
            <h3>${title}</h3>
          </a>
        </li>
      `;
        })
        .join('');
      document.querySelector('#list-box').innerHTML = listStr;
    } else {
      document.body.innerHTML += '<p class="noinfo">没有美食哦...</p>';
    }
  });
})();
